<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云日历</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="views/common.css">
    <link rel="stylesheet" href="index.css">
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
<div class="huge-screen-block">
    <div class="jumbotron huge-screen">
        <div class="huge-screen-container">

            <div class="index-header-block flex-row">
                <div class="header-content-block flex-row">
                    <div class="header-content-left flex-row">
                        <div class="header-item-start t-center flex-column">
                            <a class="header-item-a">个人云日历</a>
                        </div>
                        <div class="header-item t-center flex-column">
                            <a class="header-item-a">日历</a>
                        </div>
                        <div class="header-item t-center flex-column">
                            <a class="header-item-a">服务</a>
                        </div>
                    </div>
                    <div class="header-content-right flex-row">
                        <div class="header-item t-center flex-column">
                            <a class="header-item-a" href="views/login/login.html">登录</a>
                        </div>
                        <div class="header-item header-item-end t-center flex-column">
                            <a class="header-item-a" href="views/signup/signup.html">注册</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="huge-screen-title-block">
                <div class="huge-screen-title">Cloud-calendar</div>
            </div>
            <div class="huge-screen-content-block">
                <p class="huge-screen-content">
                    个人云日历不仅仅是一个日历，更是一个为您自动化办公的服务平台，
                    它能为您定时通知，只要您提供服务接口，它甚至可以为您关闭家庭电器等
                </p>
            </div>

            <div class="huge-screen-link-block">
                <a class="huge-screen-link">云日历服务</a>
            </div>

            <div class="huge-screen-login-button-block">
                <button class="huge-screen-login-button">加入云日历</button>
            </div>
        </div>
    </div>
</div>

<div class="service-block">
    <div class="service-container">
        <div class="t-center">
            <p class="service-title">热点服务</p>
        </div>
        <div class="t-center">
            <p class="service-desc">云日历为您提供实用的自动服务</p>
        </div>

        <div class="flex-row">
            <div class="service-img-block flex-column">
                <div class="service-img-container">
                    <img src="images/index/gathercontent.png">
                </div>
                <div class="t-center">
                    <p class="service-img-desc no-margin">接口测试</p>
                </div>
            </div>
            <div class="service-img-block flex-column">
                <div class="service-img-container">
                    <img src="images/index/jshint.png">
                </div>
                <div class="t-center">
                    <p class="service-img-desc no-margin">文档服务</p>
                </div>
            </div>
            <div class="service-img-block flex-column">
                <div class="service-img-container">
                    <img src="images/index/kippt.png">
                </div>
                <div class="t-center">
                    <p class="service-img-desc no-margin">物联网服务</p>
                </div>
            </div>

        </div>
    </div>

</div>

<div class="foot-block flex-row">
    <div class="foot-container">
        <div class="flex-row">
            <div class="foot-link-block">
                <a class="foot-link">京ICP证100780号</a>
            </div>
            <div class="foot-link-block">
                <a class="foot-link">京网文[2017]10291-1172号</a>
            </div>
            <div class="foot-link-block">
                <a class="foot-link">增值电信业务经营许可证B2 -20140447</a>
            </div>
            <div class="foot-link-block">
                <a class="foot-link">乙测资字1111805</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>